<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <link rel="stylesheet" href="./print.css" media="print" />
    <link rel="stylesheet" href="./screen.css" media="screen" />
    <script type="text/javascript" src="./jquery.min.js">
    </script>
    <script type="text/javascript" src="./html2canvas.min.js">
    </script>
    <script type="text/javascript" src="./JsBarcode.all.min.js">
    </script>
    <style>
        .yk_panel {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #fff;
            display: -webkit-box;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .yk_panel .yk_container {
            -webkit-align-self: center;
            align-self: center;
            color: #333;
            font-size: 24px;
            text-align: center;
        }

        #img_new {
            /*visibility: hidden;*/
            /*position: relative;
            left: -999999px;*/
        }

        .print_btn {
            position: fixed;
            bottom: 20px;
        }

        .big_i {
            width: 100%;
            height: 100%;
            text-align: center;
            background: #fff;
            display: -webkit-box;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .big_i img {
            width: 80%;
            -webkit-align-self: center;
            align-self: center;
        }
    </style>

</head>

<body>
    <div id="big_img" class="big_i"></div>

    <div class="yk_panel">
        <div class="yk_container">
            <div>
                <p><img src="./img/5-121204194026.gif" alt=""></p>
                <p><b>转换中，请稍后</b></p>
            </div>
        </div>
    </div>
    <div id="ele2" class="print-link table-container">
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <td colspan="2"> </td>
                    <td colspan="6" class="good_type t-r">
                        <span class="h-24">E</span>&nbsp;<span class="a-20"></span></td>
                    <td colspan="2" class="t-r"></td>
                </tr>
                <tr>
                    <td colspan="7" class="b-r">


                        <img id="img_code1" class="img_3" alt="" />

                        <!-- <li class="t-l b" style="line-height:24px;"><span class="a-10" style="padding:0 20px;">2/2</span><span class="h-10" style="padding:0 20px;">子单号</span><span class="a-10">111 111 111 111</span></li> -->
                        <!-- <li class=" t-c b" style="line-height:24px;">
                                <span class="a-10">003 203 023 629</span>
                            </li> -->
                    </td>

                    <td colspan="3">
                        <ul class="a-8">
                            <li class="h-14 b" style="">电商专配</li>
                            <!-- <li class="v-hidden">
                                <ul>
                                    <li class="h-20 b">代收货款</li>
                                    <li class="h-8">卡号：8881688888</li>
                                    <li class="h-11 b">￥3000.5元</li>
                                </ul>
                            </li> -->
                        </ul>
                    </td>
                </tr>
                <tr class="h-8">
                    <td class="b-r h-8">目的地</td>
                    <td colspan="9" class="t-l a-10 b">7312</td>
                </tr>
                <tr>
                    <td class="b-r h-8">收件人</td>
                    <td class="b t-l" colspan="9">
                        <span class="h-10"><b>叶可</b>&nbsp;</span><span class="a-10">0716-12345678</span>&nbsp;<span class="h-10">腾飞科技</span>&nbsp;<span class="h-10">广东省深圳市南山区学府路666号南山软件产业基地B栋8楼</span>
                    </td>

                </tr>
                <tr>
                    <td class="b-r h-8">寄件人</td>
                    <td colspan="9" class="t-l">
                        <ul class="a-8">
                            <li><span class="h-8">联通时科(北京)信息技术有限公司</span>&nbsp;<span class="a-8">010-65181800</span>&nbsp; <span>北京市东城区建国门内大街18号恒基中心1座1106</span>
                            </li>
                        </ul>
                    </td>
                    <!-- <td colspan="2">
                        <ul class="t-c">
                            <li class="h-14 b">定时派送</li>
                            <li class="h-10">自寄 自取</li>
                        </ul>
                    </td> -->
                </tr>
                <tr>
                    <td colspan="8" class="b-r">
                        <ul class="t-l a-8">
                            <li><span class="h-8">付款方式：<i class="h-8">寄付月结</i> </span>
                                <span class="h-8">计费重量：
                                <i class="a-8"></i></span>
                                <span class="h-8">包装费用：
                                <b class="a-stdr-8"></b></span></li>
                            <li> <span class="h-8">月结账号： 000000000001</span>
                                <span class="h-8">声明价值：
                                    <b class="a-8"></b></span>
                                <span class="h-8">运费：
                                    <i class="a-stdr-8"></i></span></li>
                            <li><span class="h-8">保价费用：
                                    <i class="a-stdr-8"></i></span>
                                <span class="h-8">费用合计：
                                        <i class="a-stdr-8"></i></span></li>
                            <li> <span class="h-8">实际重量：<b class="a-8"></b></span>
                            </li>
                        </ul>
                    </td>
                    <td colspan="2" rowspan="2" class="user">
                        <ul style="height:100%;">
                            <li class="t-l h-9" style="height:80%;">签名</li>
                            <li class="t-r h-9" style="height:20%;"><i> </i>月<i>&nbsp;&nbsp;&nbsp;&nbsp;</i>日</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="b-r h-8">托寄物</td>
                    <td colspan="3" class="b-r h-10 b">联通号卡</td>
                    <td colspan="4" class="b-r">
                        <ul class="h-8 t-l">
                            <li>收件人：<i class="a-8"></i></li>
                            <li>寄件日期：<i class="a-8"></i></li>
                            <li>派件员：<i></i></li>
                        </ul>
                    </td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td colspan="3" class="b-r">
                        <ul>
                            <li><img class="img_1" src="./img/logo.png" alt="" /></li>
                            <li><img class="img_2" src="./img/95338.png" alt="" /></li>
                        </ul>
                    </td>
                    <td colspan="7">
                        <ul>
                            <li><img id="img_code2" class="img_3" alt="" /></li>
                            <!-- <li><span class="h-10">子单号<b class="a-10">003 203 023 629</b></span></li> -->
                        </ul>
                    </td>

                </tr>
                <tr>
                    <td class="b-r h-8">寄件人</td>
                    <td colspan="9">
                        <ul class="t-l">
                            <li><span class="h-8">联通时科(北京)信息技术有限公司</span>&nbsp;<span class="a-8">010-65181800</span></li>
                            <li class="h-8">北京市东城区建国门内大街18号恒基中心1座1106</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="b-r h-8">收件人</td>
                    <td colspan="9">
                        <ul class="t-l h-8">
                            <li><span class="h-8">叶可</span>&nbsp;<span class="a-8">0716-12345678</span>&nbsp;<span class="h-8">腾飞科技</span>&nbsp;<span class="h-8">广东省深圳市南山区学府路666号南山软件产业基地B栋8楼</span></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td colspan="10" class="t-c h-8">

                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="3" class="b-r">
                        <ul>
                            <li><img class="img_1" src="./img/logo.png" alt="" /></li>
                            <li><img class="img_2" src="./img/95338.png" alt="" /></li>
                        </ul>
                    </td>
                    <td colspan="7">
                        <ul>
                            <li><img id="img_code3" class="img_3" alt="" /></li>
                            <!-- <li><span class="h-10">子单号<b class="a-10">003 203 023 629</b></span></li> -->
                        </ul>
                    </td>

                </tr>
                <tr>
                    <td class="b-r h-8">寄件人</td>
                    <td colspan="9">
                        <ul class="t-l">
                            <li><span class="h-8">联通时科(北京)信息技术有限公司</span>&nbsp;<span class="a-8">010-65181800</span></li>
                            <li class="h-8">北京市东城区建国门内大街18号恒基中心1座1106</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="b-r h-8">收件人</td>
                    <td colspan="9">
                        <ul class="t-l h-8">
                            <li><span class="h-8">叶可</span>&nbsp;<span class="a-8">0716-12345678</span>&nbsp;<span class="h-8">腾飞科技</span>&nbsp;<span class="h-8">广东省深圳市南山区学府路666号南山软件产业基地B栋8楼</span></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td colspan="10" class="t-c h-8 last_td" style="border:0;">

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--endprint-->
    <div class="print_btn" style="width:100%;">
        <div id="btn" class="btn_print">打印</div>
    </div>

    <script src="./jQuery.print.js"></script>
    <script>
        /**
         * [description]
         * @return {[type]} [description]
         */
        //

        var imgurl = '';
        $('img').load(function() {
            var w = $(".table-container").width();
            var h = $(".table-container").height();

            //为了保证生成图片的清晰度要将 canvas 的宽高设置成容器宽高的 2 倍
            var canvas = document.createElement("canvas");
            canvas.width = w * 2;
            canvas.height = h * 2;
            canvas.style.width = w + "px";
            canvas.style.height = h + "px";
            var context = canvas.getContext("2d");
            //保持全屏，将画布缩放，将图像放大两倍画到画布上
            context.scale(2, 2);

            html2canvas(document.querySelector(".table-container"), {
                canvas: canvas,
                onrendered: function(canvas) {
                    // image已经转化为base64，直接传给后台保存即可
                    var image = canvas.toDataURL("image/png");

                    var img = new Image();
                    img.src = image;
                    imgurl = image;
                    img.id = "img_new";
                    $('.table-container').html(img);
                    var imgcc = new Image();
                    imgcc.src = imgurl;
                    imgcc.id = "big_img_new";
                    $('#big_img').html(imgcc)
                    $('#btn').show();
                    $('.yk_panel').hide();
                    console.log('ok');
                    $(".table-container").css({
                        "textAlign": "center",
                        "margin": "0 auto",
                        "display": 'none'
                    })
                }
            });

        })

        JsBarcode("#img_code1", "003203023629", {
            format: "CODE128C",
            lineColor: "#000"
        });
        JsBarcode("#img_code2", "003203023629", {
            format: "CODE128C",
            lineColor: "#000"
        });
        JsBarcode("#img_code3", "003203023629", {
            format: "CODE128C",
            lineColor: "#000"
        });


        $('#btn').on('click', function() {
            //Print ele2 with default options
            console.log('111');
            $.print('#img_new');
        });
        // $('.table-container').click(preview);
    </script>
    </script>
</body>

</html>
